<template>
  <div>
    <el-card style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>审批流程</span>
          <!-- <el-button type="primary" size="small" @click="openApproval">审批</el-button> -->
        </div>
      </template>

      <!-- <el-timeline>
        <el-timeline-item
          color="#A72836"
          :timestamp="format(applyPerson.applyDate)"
        >
          {{ applyPerson.applicantName }}   发起申报
        </el-timeline-item>

        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :color="activity.color"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
        <el-timeline-item
        >
          结束
        </el-timeline-item>
      </el-timeline> -->

      <div class="node-item">
        <div class="node-status">
          <p>发起申请</p>
          <p>{{ format(applyPerson.applyDate) }}</p>
        </div>
        <div class="node-line">
          <span style="background: #A72836;" class="circle"></span>
          <span class="line"></span>
        </div>
        <div class="node-detail">{{ applyPerson.applicantName }}</div>
      </div>

      <div class="node-item" v-for="(item, index) in activitiList" :key="index">
        <div class="node-status">
          <p> {{ item.nodeStatus == 1 ? '审批通过' : item.nodeStatus == 0 ? '待审批' : item.nodeStatus == -1 ? '已驳回' : '' }} </p>
          <p>{{ format(item.applyDate) }}</p>
        </div>
        <div class="node-line">
          <span :style="item.nodeStatus == 1 ? 'background: #0bbd87;' : item.nodeStatus == -1 ? 'background: #FBB278;' : 'background: #E4E7ED;'" class="circle"></span>
          <span class="line"></span>
        </div>
        <div class="node-detail">
          <p>{{ item.approvalName }}</p>
          <p v-if="item.nodeStatus != 0">审批意见：{{ item.approvalComments }}</p>
        </div>
      </div>

      <div class="node-item">
        <div class="node-status">
          <p></p>
          <p></p>
        </div>
        <div class="node-line">
          <span :style="isEnd ? 'background: #0bbd87;' : 'background: #E4E7ED;'" class="circle"></span>
        </div>
        <div class="node-detail">结束</div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default { name: 'approvalNode' }
</script>

<script setup>
import { ref, toRefs, reactive, onMounted, watch, defineProps, defineEmits, shallowRef } from 'vue';
import { ElMessage } from 'element-plus'
import { MoreFilled } from "@element-plus/icons-vue";
import fillApprovalDialog from "@/components/backend/fillApproval.vue"
import { http } from '@/utils/http/index';
import { format } from '@/plugins/moment.js'

const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  flowId: {
    type: String,
    default: ""
  },
})

const applyPerson = ref({})

const activities = ref([])

const activitiList = ref([])

const isEnd = ref(null)

const getList = () => {
  http.$POST("/PreachM/GetPreachFlowDetailByFlowId", { flowId: props.flowId }).then(res => {
    if(res.isError) return ElMessage.warning("查询失败")
    if(!res.result.length) return

    applyPerson.value = res.result[0]

    activitiList.value = res.result

    /* 当前审核流程是否结束 */
    const showEnd = res.result.find(item => item.nodeStatus != 1)
    if (showEnd) {
      isEnd.value = false
    } else {
      isEnd.value = true
    }
    /* res.result.forEach((item) => {
      activities.value.push({
        content: `${item.nodeStatus == 1 ? '审批通过' : item.nodeStatus == 0 ? '待审批' : item.nodeStatus == -1 ? '已驳回' : '' }   ${item.approvalName}` + `${item.reason ? '审批意见：' `${item.reason}` : '' }`,
        timestamp: `${format(item.approvalDate) != '0001-01-01' ? format(item.approvalDate) : '' }`,
        color: `${ item.nodeStatus == 1 ? '#0bbd87' : item.nodeStatus == -1 ? '#FBB278'  : ''}`,
      })
    }) */
  })
}

getList()

/* 点击审核 */
const openApproval = () => {
  dialogVisible.value = true
}

/* 审核弹窗 */
const dialogVisible = ref(false)

/* 提交审核 */
const approvalChange = (approvalForm) => {
  console.log(approvalForm);

  /* return */
  let params = {}

  if(approvalForm.approval == '1') {
    params = {
      id: currentColumn.value.id,
      checkStatus: currentColumn.value.checkStatus + 1
    }
  }else {
    params = {
      id: currentColumn.value.id,
      checkStatus: -1
    }
  }

  changeCheckStatus(params)
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/backendElement.scss";

.node-item {
  display: flex;
  padding-bottom: 20px;

  .node-status {
    font-size: 12px;
    text-align: right;
    margin-right: 10px;
    min-width: 75px;
  }

  .node-line {
    margin-right: 10px;
    text-align: center;

    .circle {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      margin: 0;
    }

    .line {
      display: block;
      width: 2px;
      height: 112%;
      background: #E4E7ED;
      margin: -5px auto;
    }
  }

  .node-detail {
    font-size: 14px;
  }
}
</style>